<template>
    <div>
        <Modal v-model="data.isShow" width="360">
			<p slot="header" class="header-view">授权登录</p>
			<div class="main-view">
                <Form ref="formValidate" :model="data.data" :rules="ruleValidate" :label-width="100">
                    <FormItem label="手机号：" prop="phone">
                        <Input v-model="data.data.phone" :maxlength="11" class="input" placeholder="请输入手机号"></Input>
                    </FormItem>
                    <FormItem label="密码：" prop="password">
                        <Input type="password" v-model="data.data.password" class="input" placeholder="请输入密码"></Input>
                    </FormItem>
                </Form>
            </div>
			<div slot="footer">
				<Button type="primary" @click="clickSubmit">确定</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
    </div>
</template>

<script>
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
import accountService from '@/network/service/accountService.js'
    export default {
        props: ['data'],
        data() {
            return {
                ruleValidate: {
                    phone: [
                        { required: true, message: '请输入新手机号', trigger: 'blur' },
                        { pattern: phoneReg, message: '请正确输入手机号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            clickSubmit() {
                this.$refs['formValidate'].validate((valid) => {
                    if (valid) {
                        this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
.input {
    border: 1px solid #D5CED2;
    border-radius: 5px;
}
</style>